<template>
  <div class="m-broadcast">
    <h3>{{$t('broadcast.title')}}</h3>
    <p class="infos">{{$t('broadcast.tip')}}</p>
    <textarea name class="textvalue" v-model="param"></textarea>
    <div class="tip">
      <i class="iconfont iconjinggao"></i>
      <p>
        {{$t('broadcast.notice')+$t('broadcast.ps')}}
        <router-link to="/alytx">{{$t('broadcast.link')}}</router-link>
      </p>
    </div>
    <p class="link" v-if="result">
      <router-link :to="{ path: '/tradeHash', query: { hash: result }}">{{result}}</router-link>
    </p>
    <div
      class="sub-btn flex-center"
      @click="submit('Ptx')"
      :class="{disabled:isDisabled}"
    >{{$t('broadcast.btn')}}</div>
  </div>
</template>

<script>
import BroadBase from "@/mixins/Tool/AlyOrSendTx.js";
export default {
  mixins: [BroadBase]
};
</script>

<style lang="scss" scoped>
.m-broadcast {
  padding: 11px 20px 30px;
  min-height: calc(100vh - 113px);
  h3 {
    font-size: 14px;
    font-family: PingFangSC-Semibold;
    color: #53657a;
  }
  .link {
    margin-top: 20px;
  }
  .infos {
    margin: 12px 0 20px;
    color: $font_grey;
    line-height: 20px;
  }
  .sub-btn {
    width: 160px;
    height: 40px;
    margin: 20px auto 0;
    background: $blue;
    border-radius: 25px;
    color: $white;
    font-size: 14px;
    cursor: pointer;
    transition: 0.3s;
  }
  .disabled {
    background: $grey_deep;
    cursor: not-allowed;
  }
  .tip {
    margin-top: 20px;
    color: $orange_deep;
    vertical-align: top;
    .iconjinggao {
      font-size: 18px;
      vertical-align: top;
    }
    p {
      display: inline-block;
      width: calc(100% - 40px);
      vertical-align: top;
      margin-left: 10px;
      font-size: 14px;
      font-family: PingFangSC-Semibold;
      a {
        color: $blue;
      }
    }
  }
  .textvalue {
    width: 100%;
    height: 200px;
    padding: 10px;
    background: rgba(255, 255, 255, 1);
    border-radius: 2px;
    border: 2px solid rgba(235, 239, 241, 1);
    resize: none;
    font-size: 14px;
  }
}
</style>